<script>
import {defineComponent} from 'vue'
import chinaJson from './china.json';

export default defineComponent({
    name: "cnMap",
    data() {
       return{
           DataSum:0,
       }
    },
    mounted() {
        this.$echarts.registerMap('china', chinaJson);
        // 基于准备好的dom，初始化echarts实例
        const myChart = this.$echarts.init(this.$refs.mapContainer);

        // 指定图表的配置项和数据
        const option = {
            tooltip: {
                formatter: function (params) {
                    return params.name + '<br/>' + params.value + '例';
                }
            },
            visualMap: {
                min: 1000,
                max: 2000,
                left: 'left',
                top: 'bottom',
                calculable: false,
                show: false,
                inRange: {
                    color: ['#edf2ff', '#dbe4ff', '#bac8ff', '#91a7ff', '#5c7cfa', '#4c6ef5', '#4263eb', '#3b5bdb', '#364fc7']
                }
            },
            series: [
                {
                    name: '中国',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        show: false,
                        position: 'left',
                        offset: [0, 0],
                        textStyle: {
                            color: '#fff',
                        }

                    },

                    emphasis: {
                        // 当鼠标移入时，改变区域的颜色

                        itemStyle: {
                            areaColor: '#020E5D' // 这里设置移入时的颜色为黄色

                        },

                    },
                    data: [
                        {name: '北京', value: Math.floor(Math.random() * (2000 - 1000) + 1000)}, {name: '天津', value: Math.floor(Math.random() * (2000 - 1000) + 1000)},
                        {name: '上海', value: Math.floor(Math.random() * (2000 - 1000) + 1000)}, {
                            name: '重庆',
                            value: Math.floor(Math.random() * (2000 - 1000) + 1000)
                        },
                        {name: '河北', value: Math.floor(Math.random() * (2000 - 1000) + 1000)}, {
                            name: '河南',
                            value: Math.floor(Math.random() * (2000 - 1000) + 1000)
                        },
                        {name: '云南', value: Math.floor(Math.random() * (2000 - 1000) + 1000)}, {
                            name: '辽宁',
                            value: Math.floor(Math.random() * (2000 - 1000) + 1000)
                        },
                        {name: '黑龙江', value: Math.floor(Math.random() * (2000 - 1000) + 1000)}, {
                            name: '湖南',
                            value: Math.floor(Math.random() * (2000 - 1000) + 1000)
                        },
                        {name: '安徽', value: Math.floor(Math.random() * (2000 - 1000) + 1000)}, {
                            name: '山东',
                            value: Math.floor(Math.random() * (2000 - 1000) + 1000)
                        },
                        {name: '新疆', value: Math.floor(Math.random() * (2000 - 1000) + 1000)}, {
                            name: '江苏',
                            value: Math.floor(Math.random() * (2000 - 1000) + 1000)
                        },
                        {name: '浙江', value: Math.floor(Math.random() * (2000 - 1000) + 1000)}, {
                            name: '江西',
                            value: Math.floor(Math.random() * (2000 - 1000) + 1000)
                        },
                        {name: '湖北', value: Math.floor(Math.random() * (2000 - 1000) + 1000)}, {
                            name: '广西',
                            value: Math.floor(Math.random() * (2000 - 1000) + 1000)
                        },
                        {name: '甘肃', value: Math.floor(Math.random() * (2000 - 1000) + 1000)}, {
                            name: '山西',
                            value: Math.floor(Math.random() * (2000 - 1000) + 1000)
                        },
                        {name: '内蒙古', value: Math.floor(Math.random() * (2000 - 1000) + 1000)}, {
                            name: '陕西',
                            value: Math.floor(Math.random() * (2000 - 1000) + 1000)
                        },
                        {name: '吉林', value: Math.floor(Math.random() * (2000 - 1000) + 1000)}, {
                            name: '福建',
                            value: Math.floor(Math.random() * (2000 - 1000) + 1000)
                        },
                        {name: '贵州', value: Math.floor(Math.random() * (2000 - 1000) + 1000)}, {
                            name: '广东',
                            value: Math.floor(Math.random() * (2000 - 1000) + 1000)
                        },
                        {name: '青海', value: Math.floor(Math.random() * (2000 - 1000) + 1000)}, {
                            name: '西藏',
                            value: Math.floor(Math.random() * (2000 - 1000) + 1000)
                        },
                        {name: '四川', value: Math.floor(Math.random() * (2000 - 1000) + 1000)}, {
                            name: '宁夏',
                            value: Math.floor(Math.random() * (2000 - 1000) + 1000)
                        },
                        {name: '海南', value: Math.floor(Math.random() * (2000 - 1000) + 1000)}, {
                            name: '台湾',
                            value: Math.floor(Math.random() * (2000 - 1000) + 1000)
                        },
                        {name: '香港', value: Math.floor(Math.random() * (2000 - 1000) + 1000)}, {
                            name: '澳门',
                            value: Math.floor(Math.random() * (2000 - 1000) + 1000)
                        },{
                            name: '南海诸岛',
                            value: Math.floor(Math.random() * (2000 - 1000) + 1000)
                        }
                    ]


                }
            ]
        };
        myChart.setOption(option);
       option.series[0].data.forEach(item=>{
          this.DataSum+=item.value;
       })
        this.$emit('DataSum',this.DataSum);
    }


})
</script>

<template>
    <div ref="mapContainer" style="width: 100%; height: 90%;" class="map"></div>
</template>

<style scoped lang="less">
.map {
  background-image: url('../.././public/images/mapbg.f31cfd5da5bc8c77dfe3.png');
  background-size: 90% 90%;
  background-position: 30px;
  background-repeat: no-repeat;
}
</style>